<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="品牌名称">
        <el-input
          v-model="searchMap.where.name"
          placeholder="请输入品牌名称"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="展示状态">
        <el-select
          v-model="searchMap.where.showStatus"
          placeholder="请选择展示状态"
          clearable
        >
          <el-option
            v-for="(item, index) in statusArr"
            :key="index"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          type="success"
          @click="
            dialogFormVisible = true;
            title = '添加商品';
            entity = {};
            imageUrl = '';
          "
          ><i class="el-icon-circle-plus el-icon--right">添加</i></el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="delMore()"
          ><i class="el-icon-error el-icon--right">批量删除</i></el-button
        >
      </el-form-item>
    </el-form>

    <el-table :data="brandList" style="width: 100%" ref="brandTable">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="name" label="品牌名称"> </el-table-column>
      <el-table-column prop="firstLetter" label="首字母"> </el-table-column>
      <el-table-column prop="logo" label="品牌logo">
        <template slot-scope="scope">
          <div>
            <img style="width: 85px" :src="scope.row.logo" alt="" />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="productCommentCount" label="评论数">
        <template slot-scope="scope">
          <div>
            {{ scope.row.productCommentCount | nullFormart }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="productCount" label="产品数">
        <template slot-scope="scope">
          <div>
            {{ scope.row.productCount | nullFormart }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="showStatus" label="是否展示">
        <template slot-scope="scope">
          <div>
            <el-switch
              v-model="scope.row.showStatus"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="updateBrand(scope.row)"
              >修改</el-button
            >
            <el-button
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="deletBrand(scope.row.id)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchMap.pageNum"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="searchMap.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal"
      >
      </el-pagination>
    </div>
    <!-- 添加模态框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="entity" :rules="rules" ref="brandForm">
        <el-form-item label="品牌名称" label-width="100px" prop="name">
          <el-input v-model="entity.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="品牌首字母" label-width="100px" prop="firstLetter">
          <el-input v-model="entity.firstLetter" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="logo" label-width="100px" prop="logo">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8080/upload/img"
            :headers="imgHeader"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveBrand()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { findByPage, save, update, delBrand, delMore } from "@/api/brand";
import { Message } from "element-ui";
export default {
  data() {
    return {
      searchMap: {
        pageNum: 1,
        pageSize: 5,
        where: {
          name: "",
          // showStatus:0
        },
      },
      pageTotal: 0,
      brandList: [],
      statusArr: [
        { label: "禁用", value: 0 },
        { label: "启用", value: 1 },
      ],
      dialogFormVisible: false,
      entity: {
        firstLetter: "",
        logo: "",
        name: "",
      },
      title: "",
      imageUrl: "",
      rules: {
        name: [
          { required: true, message: "请输入品牌名称", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        firstLetter: [
          { required: true, message: "请输入品牌首字母", trigger: "blur" },
        ],
        logo: [
          { required: true, message: "请上传品牌logo", trigger: "change" },
        ],
      },
      imgHeader: {
        token:localStorage.getItem("token")
      },
    };
  },
  methods: {
    //分页查询
    search() {
      findByPage(this.searchMap).then((res) => {
        this.brandList = res.data;
        this.pageTotal = res.pageTotal;
      });
    },
    //添加产品
    saveBrand() {
      this.$refs.brandForm.validate((valid) => {
        if (valid) {
          if (!this.entity.id) {
            save(this.entity).then((res) => {
              this.$notify({
                title: res.success ? "成功" : "失败",
                message: res.msg,
                type: res.success ? "success" : "error",
              });
              this.dialogFormVisible = false;
              this.search();
            });
          } else {
            update(this.entity).then((res) => {
              this.$notify({
                title: res.success ? "成功" : "失败",
                message: res.msg,
                type: res.success ? "success" : "error",
              });
              this.dialogFormVisible = false;
              this.search();
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //修改产品
    updateBrand(rowData) {
      this.dialogFormVisible = true;
      this.imageUrl = rowData.logo;
      this.entity = JSON.parse(JSON.stringify(rowData));
    },
    //删除产品
    deletBrand(id) {
      this.$confirm("确认删除此条信息？删除后不可恢复!!!").then((res) => {
        if (res) {
          delBrand(id).then((res) => {
            this.$notify({
              title: res.success === true ? "成功" : "失败",
              message: res.msg,
              type: res.success === true ? "success" : "error",
            });
            this.search();
          });
        }
      });
    },
    //批量删除
    delMore() {
      this.$confirm("确认删除多条信息？删除后不可恢复!!!").then((res) => {
        if (res) {
          var ids = [];
          this.$refs.brandTable.selection.forEach((element) => {
            ids.push(element.id);
          });
          delMore(ids).then((res) => {
            this.$notify({
              title: res.success === true ? "成功" : "失败",
              message: res.msg,
              type: res.success === true ? "success" : "error",
            });
            this.search();
          });
        }
      });
    },
    handleSizeChange(size) {
      this.searchMap.pageSize = size;
      this.search();
    },
    handleCurrentChange(page) {
      this.searchMap.pageNum = page;
      this.search();
    },
    //文件上传成功时的钩子函数
    handleAvatarSuccess(response, file, fileList) {
      this.imageUrl = response.data;

      this.entity.logo = response.data;
    },
    //文件上传之前的钩子函数
    beforeAvatarUpload() {},
  },
  created() {
    this.search();
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>